import React,{useState,useEffect} from 'react'
import { HomeOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';
import { useLocation } from 'react-router-dom';

export default function Bread() {
    // const location = useLocation()如下写法解构方便点
    const {pathname} = useLocation()

    //动态显示面包屑上文字
    const [breadName,setBreadName] = useState('')
    // console.log(pathname);

    //不是在组件mounted时获取路径，而是路径一旦变化就要获取对应的路径名称并且修改breadName
    //监听路由的路径(/list /edit /means)
    useEffect(()=>{
        switch (pathname) {
            case '/listlist':
                setBreadName('查看文章列表List');
                break;
            case '/listtable':
                setBreadName('查看文章列表Table');
                break;
            case '/edit':
                setBreadName('文章编辑');
                break;
            case '/means':
                setBreadName('修改资料');
                break;
            default:
                setBreadName(pathname.includes('edit') ? '文章编辑' : '')
                break;
                
        }
    },[pathname])

    return (
        <Breadcrumb style={{height:'30px',lineHeight:'30px'}}>
            <Breadcrumb.Item  href='/'>
                <HomeOutlined />
            </Breadcrumb.Item>
            <Breadcrumb.Item>{breadName}</Breadcrumb.Item>
        </Breadcrumb>
    )
}
